<template>
	<view>
		<cu-custom :bgColor="'bg-'+ theme.themeColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">分销中心</block>
		</cu-custom>
		<view :class="'bg-'+theme.themeColor">
			<view class="flex padding">
				<view v-if="userInfo.avatarUrl" class="cu-avatar round xl head flex"
					:style="'background-image:url(' + userInfo.avatarUrl + ')'">
				</view>
				<view class="padding-sm">
					<view v-if="userInfo.nickName">
						{{userInfo.nickName}}
					</view>
					<view v-if="userInfo.phone" class="padding-tb-sm">
						{{userInfo.phone}}
					</view>
				</view>
			</view>
			<view class="grid no-border col-3  flex justify-center align-center">
				<view class="content text-center">
					<view class="text-xl text-price">
						{{distributionUser.frozenAmount ? distributionUser.frozenAmount: 0.00}}
					</view>
					<view class="text-sm">冻结中佣金</view>
				</view>
				<view class="content text-center">
					<view class="text-xl text-price">
						{{distributionUser.totalWithdrawal ? distributionUser.totalWithdrawal: 0.00}}
					</view>
					<view class="text-sm">累计提现</view>
				</view>
				<view class="content text-center">
					<view class="text-xl text-price">
						{{distributionUser.totalAmount ? distributionUser.totalAmount: 0.00}}
					</view>
					<view class="text-sm">累计获得佣金</view>
				</view>
			</view>
		</view>
		<view class="margin-sm radius bg-white">
			<view class="cu-list menu solid-bottom">
				<view class="cu-item ">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-recharge text-blue margin-right-xs"></text> 可提现金额
						</view>
						<view class=" text-xxl padding">
							<text
								class="text-price text-red">{{distributionUser.totalAmount-distributionUser.frozenAmount}}</text>
						</view>
					</view>
					<view class="action">
						<button class="cu-btn bg-red margin-tb-sm lg round" @tap="withdrawal">提现</button>
					</view>
				</view>
			</view>
			<view class="cu-list grid no-border col-4">
				<view class="cu-item">
					<navigator class="content" hover-class="none" url="/pages/distribution/distribution-card/index">
						<view class="cuIcon-qr_code" :class="'text-'+ theme.themeColor"></view>
						<view class="text-grey">推广名片</view>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator class="content" hover-class="none"
						url="/pages/user-withdrawal/withdrawal-record/index">
						<view class="cuIcon-vipcard" :class="'text-'+ theme.themeColor"></view>
						<view class="text-grey">提现记录</view>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator class="content" hover-class="none"
						url="/pages/distribution/distribution-order/order-list/index">
						<view class="cuIcon-form" :class="'text-'+ theme.themeColor"></view>
						<view class="text-grey">分销订单</view>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator class="content" hover-class="none" url="/pages/distribution/distribution-team/index">
						<view class="cuIcon-friend" :class="'text-'+ theme.themeColor"></view>
						<view class="text-grey">我的团队</view>
					</navigator>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		getObj
	} from '@/api/distributionuser.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				userInfo: this.$store.state.user.userInfo,
				distributionUser: {}
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				getObj({}).then(res => {
					this.distributionUser = res.data
				});
			},
			withdrawal() {
				uni.navigateTo({
					url: "/pages/user-withdrawal/withdrawal-apply/index"
				})
			}
		}
	}
</script>

<style>
</style>
